<template>
  <view class="viewport">
    <!-- 顶部导航栏 -->
    <fui-nav-bar
      isOccupy
      isFixed
      background="#0052D9"
      title="驳回"
      color="#fff"
      @leftClick="goBack"
    >
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <!-- 内容区 -->
    <view class="warp">
      <view class="content">
        <view class="form-item">
          <view class="label">审批意见</view>
          <textarea
            class="input opinion-textarea"
            placeholder="请输入"
            v-model="opinion"
          />
        </view>
        <view class="form-item">
          <view class="label">驳回节点</view>
          <view class="picker-trigger" @click="showPicker = true">
            <text :class="{ placeholder: !selectedNode }">
              {{ selectedNode || "请选择驳回节点" }}
            </text>
            <text class="arrow">&gt;</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <view class="footer">
      <view class="confirm" @tap="handleConfirm">确认</view>
    </view>

    <!-- 节点选择弹窗 -->
    <view v-if="showPicker" class="picker-modal" @click="showPicker = false">
      <view class="picker-panel" @click.stop>
        <view class="picker-title">请选择节点</view>
        <view
          class="picker-option"
          v-for="item in nodeOptions"
          :key="item"
          @click="selectNode(item)"
        >
          <text :class="{ blue: item !== '取消', red: item === '取消' }">{{
            item
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { rejectRepairApply } from "@/pages/api/subpkg_index/warranty.js";

const opinion = ref("");
const selectedNode = ref("");
const showPicker = ref(false);
const nodeOptions = ["发起人", "上一节点", "自定义节点", "取消"];
const repairId = ref("");

onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  repairId.value = options.id;
});

function selectNode(item) {
  if (item === "取消") {
    showPicker.value = false;
    return;
  }
  selectedNode.value = item;
  showPicker.value = false;
}

function goBack() {
  uni.navigateBack();
}

async function handleConfirm() {
  if (!opinion.value.trim()) {
    uni.showToast({
      title: "请输入审批意见",
      icon: "none",
    });
    return;
  }
  if (!selectedNode.value) {
    uni.showToast({
      title: "请选择驳回节点",
      icon: "none",
    });
    return;
  }

  try {
    const res = await rejectRepairApply({
      id: repairId.value,
      reviewComment: opinion.value.trim(),
      rejectionNode: selectedNode.value,
    });

    if (res.code === 200) {
      uni.showToast({
        title: "驳回成功",
        icon: "success",
      });

      setTimeout(() => {
        // 跳转回列表页
        uni.reLaunch({
          url: "/subpkg_index/warranty/index",
        });
      }, 1500);
    } else {
      uni.showToast({
        title: res.msg || "驳回失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("驳回失败：", error);
    uni.showToast({
      title: "网络错误，请稍后重试",
      icon: "none",
    });
  }
}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
}
.warp {
  flex: 1;
  padding-bottom: 150rpx;
}
.content {
  padding: 30rpx;
}
.form-item {
  margin-bottom: 40rpx;
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
}
.label {
  color: #333;
  font-size: 30rpx;
  margin-bottom: 20rpx;
  font-weight: 500;
}
.input {
  width: 100%;
  border: none;
  font-size: 28rpx;
  color: #333;
}
.opinion-textarea {
  height: 200rpx;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 8rpx;
}
.picker-trigger {
  display: flex;
  align-items: center;
  min-height: 80rpx;
  font-size: 28rpx;
  color: #333;
}
.picker-trigger .placeholder {
  color: #999;
}
.picker-trigger .arrow {
  margin-left: auto;
  color: #999;
  font-family: "宋体";
}
.picker-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.picker-panel {
  width: 100%;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.picker-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}
.picker-option {
  text-align: center;
  padding: 30rpx 0;
  font-size: 32rpx;
  border-bottom: 1rpx solid #eee;
}
.picker-option .blue {
  color: #0052d9;
}
.picker-option .red {
  color: #ff4d4f;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1rpx solid #eee;
  height: 150rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}
.confirm {
  width: 100%;
  height: 88rpx;
  background: #0052d9;
  color: #fff;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}
</style>
